<template>
    <div id="app">

        <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">
            <!--抬头开始-->
            <el-header>
            <Top/>
            </el-header>
            <!--抬头结束-->
            <!--内容开始-->
            <el-main class="center">
                <el-row gutter="20">
                    <!--帖子相关开始-->
                    <!--帖子内容开始-->
                    <el-col span="16">
                        <div style="height: 30px;"></div>
                        <el-card style="background-color: rgba(255,255,255,70%)">
                            <h2 style="color:#000;text-align: center" >
                                {{blogTitle}}
                            </h2>
                            <div style="font-size: 12px;color: #666;text-align: center">
                                <span >作者：{{author}}</span>
                                <br>
                                <span >浏览次数：{{ visit }}</span><span >|点赞量：{{ likes }}</span><span >|收藏次数：{{ collects }}</span>

                                <br>
                                <span>类别：{{ typeName }}</span><span>|发布时间：{{ blogCreateTime }}</span>
                            </div>
                            <el-divider></el-divider>
                            <!--文章主体内容-->
                            <div id="doc-content" style="width: 100%">
                                <mavon-editor v-model="blogContent"
                                              :subfield="false"
                                              :defaultOpen="'preview'"
                                              :editable="false"
                                              :toolbarsFlag="false"
                                />
                            </div>
                            <p></p>
                        </el-card>
                        <!--帖子内容结束-->
                        <!--评论相关开始-->
                        <el-card style="margin-top: 10px;background-color: rgba(255,255,255,80%)">
                            <p>评论</p>
                            <el-divider></el-divider>
                            <el-row gutter="19">
                                            <el-input v-model="commentDto.content" type="textarea" placeholder="说点啥..." required style="width: 80%"></el-input>
                                        <el-button  style="height: 54.5px;width: 180px" @click="addComment()" >提交</el-button>
                            </el-row>
                                    <h3>评论列表</h3>
                                    <ul>
                                        <li v-for="comment in parentComments" :key="comment.id">
                                            <el-avatar :src="comment.icon" ></el-avatar>
                                            <span style="font-size: 30px">{{comment.nickname}}</span>
                                            <img style="width: 140px; height: 48px;" :src="comment.title" >
                                            <p style="font-size: 20px">{{comment.content}}</p>
                                            <p style="color: #90a0a7">{{comment.createTime}}</p>
                                            <el-popover
                                                placement="bottom"
                                                width="800"
                                                trigger="click">
                                                <el-input
                                                    type="textarea"
                                                    :rows="2"
                                                    placeholder="请输入评论"
                                                    v-model="commentDto.content"
                                                    style="width: 80%"
                                                >
                                                </el-input>
                                                <el-button  style="height: 54.5px;width: 150px" @click="replyComment(comment.id,comment.userId)">提交</el-button>
                                                <a  style="color: #409EFF;position: relative;left: 85%" slot="reference" >回复</a>
                                            </el-popover>
                                            <a  style="color: #409EFF;position: relative;left: 90%"  @click="showChildComments(comment.id)">更多<img style="width: 20px;height: 20px;position: relative;top: 5px" src="@/assets/xia.png"/></a>
                                            <div v-show="showChildCommentId === comment.id">
                                                <ul>
                                                    <li v-for="comment2 in childComments" :key="comment2.id" style="position: relative;left: 10%">
                                                        <el-avatar :src="comment2.icon" ></el-avatar>
                                                        <span style="font-size: 30px">{{comment2.nickname}}</span>
                                                        <img style="width: 140px; height: 48px;" :src="comment2.title" >
                                                        <p style="font-size: 10px;color: #90a0a7">回复<span style="color: #0088ff">{{comment2.replyName}}</span></p>
                                                        <p style="font-size: 20px">{{comment2.content}}</p>
                                                        <p style="color: #90a0a7">{{comment2.createTime}}</p>
                                                        <el-popover
                                                            placement="bottom"
                                                            width="800"
                                                            trigger="click">
                                                            <el-input
                                                                type="textarea"
                                                                :rows="2"
                                                                placeholder="请输入评论"
                                                                v-model="commentDto.content"
                                                                style="width: 80%"
                                                            >
                                                            </el-input>
                                                            <el-button  style="height: 54.5px;width: 150px" @click="replyComment(comment.id,comment2.userId)">提交</el-button>
                                                        <a  style="color: #409EFF;position: relative;left: 85%" slot="reference" >回复</a>
                                                        </el-popover>

                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>


                            <!--评论列表结束-->
                        </el-card>
                        <!--评论相关结束-->
                    </el-col>
                    <el-col span="1" >
                        <div style="position: fixed;top: 15%">
                                <img v-if="isLiked" v-bind:src='"http://rww08uahf.hn-bkt.clouddn.com/94da35c97c124f13a7305cbad76165ec.png"' @click="like(blogId)"
                                    style="width: 40px" />
                                <img v-else v-bind:src='"http://rww08uahf.hn-bkt.clouddn.com/2a5c15b25c70467d985338541df5a80b.png"' @click="like(blogId)"
                                    onmouseover="this.src='http://rww08uahf.hn-bkt.clouddn.com/20e739ca20714f4c86e707d7e4087320.png'"
                                    onmouseout="this.src='http://rww08uahf.hn-bkt.clouddn.com/2a5c15b25c70467d985338541df5a80b.png'" style="width: 40px;hover:" />
                                <p style="color: whitesmoke">{{ isLiked ? '已点赞' : '点赞' }}</p>


                            <div style="margin-top: 10px">
                                <img v-if="isCollect" v-bind:src='"http://rww08uahf.hn-bkt.clouddn.com/9ab619a613e147458ee823156ecd50ae.png"' v-on:click="dialogTableVisible1 = false"
                                    style="width: 40px" />
                                <img v-else v-bind:src='"http://rww08uahf.hn-bkt.clouddn.com/d9b99d3da19442af8acf8526389a2cce.png"' v-on:click="dialogTableVisible1 = true"
                                    onmouseover='this.src="http://rww08uahf.hn-bkt.clouddn.com/272f21633fa9498b923e3242c511e1c7.png"'
                                    onmouseout='this.src="http://rww08uahf.hn-bkt.clouddn.com/d9b99d3da19442af8acf8526389a2cce.png"' style="width: 40px" />
                                <p style="color: whitesmoke">{{ isCollect ? '已收藏' : '收藏' }}</p>
                            </div>

                            <div style="margin-top: 10px">
                                <img src="http://rww08uahf.hn-bkt.clouddn.com/f6f200d8b5974f5caf0440244abda637.png" onmouseover='this.src="http://rww08uahf.hn-bkt.clouddn.com/4520c3c6f415473fb35e7c5737432e61.png"'
                                    onmouseout='this.src="http://rww08uahf.hn-bkt.clouddn.com/f6f200d8b5974f5caf0440244abda637.png"' style="width: 40px" @click="open()" />
                                <p style="color: whitesmoke">打赏</p>
                            </div>

                            <div style="margin-top: 10px">
                                <img src="http://rww08uahf.hn-bkt.clouddn.com/c46c56b4038942308224c2fcca7d77f0.png" onmouseover='this.src="http://rww08uahf.hn-bkt.clouddn.com/cb6a6f2ee7844bcab117a8ee0ebbd227.png"'
                                    onmouseout='this.src="http://rww08uahf.hn-bkt.clouddn.com/c46c56b4038942308224c2fcca7d77f0.png"' style="width: 40px"
                                    @click="dialogTableVisible = true" />
                                <p style="color: whitesmoke">分享</p>

                            </div>

                        </div>
                    </el-col>
                    <el-dialog title="收藏到：" :visible.sync="dialogTableVisible1" width="40%" >
                        <a style="color: #0088ff;position: relative;left: 80%"  @click="open1()">新增收藏夹</a>
                        <el-row  v-for=" c in collectDir" style="margin: 5px;cursor:pointer" >
                            <h1 style="color:#9966FF;position: relative;left: 45%" @click="collect(c.id)">{{c.name}}</h1>
                        </el-row>





                    </el-dialog>
                    <el-dialog title="分享到：" :visible.sync="dialogTableVisible" width="20%" >
                        <span style="margin: 0 5px 0 30px;" @click="shareToQQ()">
                              <img src="@/assets/QQ.png" alt="" style="height: 40px;width: 40px"/>

                            </span>
                        <span style="margin: 0 30px 0 30px;" @click="shareToMicroblog()">
                              <img src="../../assets/weibo.png" alt="" style="height: 40px;width: 40px" />

                            </span>
                        <span style="margin: 0 30px 0 5px;" @click="shareToQQRom()">
                              <img src="../../assets/kongjian.png" alt="" style="height: 40px;width: 40px" />

                            </span>
                    </el-dialog>
                    <!--右侧边栏开始-->
                    <el-col span="7" style="position: relative;left: 5%">
                        <div style="height: 30px;"></div>
                        <el-card class="right-card" style="height: 430px;width:380px;text-align: center ;background-color: rgba(255,255,255,40%)">
                            <div style="height: 60px;"></div>

                            <div style="position: relative;top: -45px">
                                <img :src='icon'
                                    style="border-radius: 90px;border: 5px solid white;width: 90px;height: 90px">
                                <p></p>
                                <img style="width: 140px; height: 48px;" :src="title" >

                                <h1 style="font-size: 20px;margin: 0;font-weight: bold;color: white"  @click="inuser(infoArr.id)">作者：{{author}}</h1>
                                <h2 style="color: lightyellow">Lv{{level}}</h2>
                                <h3><span style="color: lightyellow">粉丝：{{infoArr.fans}}|关注：{{infoArr.follow}}</span></h3>
                                <h4><span style="color: lightyellow">原创：{{infoArr.blogCount}}|获赞{{infoArr.likeCount}}|访问：{{infoArr.visitCount}}</span></h4>
                                <el-button @click="favor(infoArr)" class="my_button"
                                    :style="{ backgroundColor: bg_color, color: ft_color, }" @mouseenter="change()"
                                    @mouseleave="goback()" round>
                                    {{ content }}
                                </el-button>
                            </div>
                        </el-card>

                        <!--作者其他文章开始-->
                        <el-col style="margin: 10px 0">
                            <h3 style="color: lightyellow">其他文章</h3>
                            <!--作者文章列表开始-->
                            <el-row v-for="item in blogData">
                                <el-card style="width: 370px;background-color: rgba(255,255,255,40%)">
                                <el-col span="10">
                                    <img :src="item.blogImg" width="100%" height="70px" >
                                </el-col>
                                <el-col span="14">
                                    <a @click="toDetail(item.id,item.userId)">
                                    <p style="margin:-5px 5px 0 10px;height: 50px">{{ item.blogTitle }}</p>
                                    </a>
                                    <span style="margin: 0 10px 0 5px"><img src="../../assets/zan.png" style="width: 16px;height: 16px;">{{ item.likes }}</span>
                                    <span style="margin: 0 5px 0 5px"><i class="el-icon-star-off"></i>{{ item.collects }}</span>
                                    <span style="margin: 0 5px 0 5px"><i class="el-icon-view"></i>{{ item.visit }}</span>
                                    <span style="margin: 0 5px 0 5px">#{{ item.typeName }}</span>
                                    <i class="el-icon-time" style="color: #666;margin: 0 5px 5px 0">{{ item.createTime }}</i>
                                </el-col>
                                </el-card>
                                <div style="height: 30px"></div>
                            </el-row>
                            <!--作者文章列表结束-->
                        </el-col>
                        <!--作者其他文章结束-->
                        <!--热门文章开始-->

                        <!--热门文章结束-->
                    </el-col>
                    <!--右侧边栏结束-->
                </el-row>
            </el-main>
            <!--内容结束-->
            <!--底部开始-->
            <Bottom/>
            <!--底部结束-->
        </el-container>
    </div>
</template>
<script>
import Top from "@/components/Top.vue";
import Bottom from "@/components/Bottom.vue";
import axios from "axios";
import '@/api/request'
export default {

    name: "zan",
    components: {Top,
        Bottom},
    data() {
        return {
            collectDto: {
                dirId:'',
                blogId:'',
            },
            blogData: [],
            shareUrl: location.href,
            dialogTableVisible: false,
            dialogTableVisible1:false,
            level:'',
            title:'',
            blogContent: '',
            blogTitle: '',
            author:'',
            icon:'',
            blogCreateTime:'',
            typeName:'',
            visit:'',
            likes:'',
            collects:'',
            liked: false,
            content: '+关注',
            bg_color: "#fef0f0",
            ft_color: "#f56c6c",
            components: {},
            isCollect: false,
            isLiked: false,
            authorId:'',
            blogId:'',
            commentDto: {
                blogId:'',
                content: '',
                replyId:'',
                parentId:''
            },
            parentComments: [],
            childComments: [],
            collectDir:[],
            showChildCommentId: null,
            uid:'',
            infoArr: {

            },
        }
    },
    created () {
        this.uid = localStorage.getItem("userId");
        this.queryUserInfo(this.uid);
        this.findDir();
    },
    mounted:function() {
        this.queryById();
        this.queryOtherBlog();
    },
    watch: {},
    methods: {
        inuser(userId) {
            console.log("传输到方法的userid"+userId)
            if(localStorage.getItem('user')===null){
                this.$message.info('请先登录');
                return;
            }
            if (userId === this.loginUserId) {
                window.location.href = "personalCenter.html";
            }else {
                localStorage.setItem('userId', userId);
                window.location.href = "otherUserCenter.html"
            }
        },
        findDir(){
            axios.get("http://localhost:8088/collectDirectory/list").then(response=>{
                if (response.data.code==1){
                    this.collectDir=response.data.data
                    console.log("获取到的收藏夹对象"+this.collectDir)
                    // this.collectDir.forEach(e=>{
                    //     var id=e.id
                    //     console.log("获取到的收藏夹id="+id)
                    //     // this.findContent(id)
                    // })

                    console.log(response.data.data)
                    console.log("获取到的收藏夹目录"+this.collectDir)
                }
            })

        },

        open1(){
            this.$prompt('请输入收藏夹名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {

                this.createDir(value)


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        createDir(value){
            console.log("create方法获取的文件夹名:"+ value)
            axios.post("http://localhost:8088/collectDirectory/newDir",value,{headers:{
                    'Content-Type':'application/json'
                }}).then(response=>{


                if (response.data.code==1){

                    this.$message({
                        type: 'success',
                        message: '恭喜你！创建收藏夹:'+value+"成功！",
                        offset:100
                    });
                    this.findDir();

                }else{
                    this.$message({
                        type:'warning',
                        message:response.data.msg,
                        offset:100
                    })

                }

            })



        },
        followorclose(u){
            console.log("isfollow=="+u.isfollow);
            if(u.isfollow===1){
                this.liked=true;
                u.isfollow=0;
                console.log("isfollow="+u.isfollow);
                console.log("liked="+this.liked);
            }else {
                this.liked=false;
                u.isfollow=1;
                console.log("isfollow="+u.isfollow);
                console.log("liked="+this.liked);
            }
            axios.put("http://localhost:8088/userFollow/"+u.id+"/"+this.liked).then(response=>{
            })
        },
        queryUserInfo(uid){
            let url = 'http://localhost:8088/user/info/'+uid;
            axios.get(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.code === 1) {
                    this.infoArr = jsonResult.data;
                    console.log("isfollow="+this.infoArr.isfollow)
                    if (this.infoArr.isfollow===0){
                        this.liked=true;
                        this.content = "已关注";
                        this.bg_color = "#f56c6c";
                        this.ft_color = "#fef0f0";
                    }else if (this.infoArr.isfollow===1){
                        this.liked=false;
                        this.content = "+关注"
                        this.bg_color = "#fef0f0";
                        this.ft_color = "#f56c6c";
                    }
                }
            });


        },
        toDetail(id,userId) {
            localStorage.setItem('id', id);
            localStorage.setItem('userId', userId);
            window.location.href = "detail.html"
        },

        queryOtherBlog(){
            const userId = localStorage.getItem('userId');
            axios.get('http://localhost:8088/blog/selectOtherBlog/'+userId).then(res => {
                if (res.data.code===1) {
                    let jsonResult = res.data;
                    if (jsonResult.code === 1) {
                        this.blogData = jsonResult.data;
                    }
                }
            });
        },
        /**
         * 分享到qq
         */
        shareToQQ(){
            //跳转地址
            window.open(
                "http://connect.qq.com/widget/shareqq/index.html?title=qqhaoyou&url=http://kunba.eu.org&desc=为学习交友而生！&pics=&site=Kun吧"

            );
        },
        /**
         * 分享到微博
         */
        shareToMicroblog() {
            //跳转地址
            window.open(
                "https://service.weibo.com/share/share.php?url=http://kunba.eu.org"
            );
        },
        /**
         * 分享到qq空间
         */
        shareToQQRom() {
            //跳转地址
            window.open(
                "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://kunba.eu.org"
            );
        },

        // 获取一级评论列表
        getParentComments() {
            const id = localStorage.getItem('id');
            axios.get('http://localhost:8088/blogReply/parent/'+id).then(res => {
                this.parentComments = res.data.data;
                console.log(this.parentComments)

            }).catch(err => {
                console.log(err);
            });
        },
        // 获取二级评论列表
        getChildComments(parentId) {
            const id = localStorage.getItem('id');
            axios.get('http://localhost:8088/blogReply/child', {
                params: {parentId,id}
            }).then(res => {
                this.childComments = res.data.data;
            }).catch(err => {
                console.log(err);
            });
        },
        // 显示二级评论
        showChildComments(parentId) {
            if(this.showChildCommentId === parentId) {
                this.childComments = [];
                this.showChildCommentId = null;

            }else {
                this.showChildCommentId = parentId;
                this.getChildComments(parentId);
            }
        }
        ,
        queryById() {
            const id = localStorage.getItem('id');
            axios.get('http://localhost:8088/blog/'+id).then((res) => {
                if (res.data.code==1){
                    this.blogContent=res.data.data.blogContent;
                    this.blogTitle=res.data.data.blogTitle;
                    this.author=res.data.data.name;
                    this.blogCreateTime=res.data.data.createTime;
                    this.visit=res.data.data.visit;
                    this.likes=res.data.data.likes;
                    this.collects=res.data.data.collects;
                    this.typeName=res.data.data.typeName;
                    this.isLiked=res.data.data.isLike;
                    this.isCollect=res.data.data.isCollect;
                    console.log("收藏状态"+res.data.data.isCollect)
                    this.icon=res.data.data.icon;
                    this.blogId=res.data.data.id;
                    this.level=res.data.data.level;
                    this.title=res.data.data.title;
                    this.getParentComments();

                }

            });

        },
        handleSelect(key, keyPath) {
            if (key == 0) {
                location.href = "/";
            } else if (key == 1) {
                location.href = "/title/toShop";
            } else if (key == 2) {
                location.href = "/title/toShop";
            }
        },
        handleClick() {
            this.isUp = !this.isUp
        },

        like(id) {
          this.isLiked=!this.isLiked;
            axios.put('http://localhost:8088/blog/like/'+id).then((res) => {
            });
        },
        // 添加评论
        addComment() {
            this.commentDto.blogId=localStorage.getItem('id');
            axios.post('http://localhost:8088/blogReply/add', this.commentDto).then(res => {
                if (res.data.code===1){
                    this.$message.success(res.data.data);
                    this.commentDto.content = '';
                    this.getParentComments();
                }else {
                    this.$message.error(res.data.msg);
                }

            }).catch(err => {
                console.log(err);
            });
        },
        // 回复评论
        replyComment(id,userId) {
            this.commentDto.blogId=localStorage.getItem('id');
            this.commentDto.parentId=id;
            this.commentDto.replyId=userId;
            axios.post('http://localhost:8088/blogReply/add', this.commentDto).then(res => {
                if (res.data.code===1){
                    this.$message.success(res.data.data);
                    this.commentDto.content = '';
                    this.getChildComments(id);
                }else {
                    this.$message.error(res.data.msg);
                }

            }).catch(err => {
                console.log(err);
            });
        },
        collect(id) {
            this.collectDto.blogId=localStorage.getItem('id');
            this.collectDto.dirId=id;
            axios.post("http://localhost:8088/collectContent/save",this.collectDto).then(response=>{
                if (response.data.code==1){
                    this.isCollect = !this.isCollect;
                    this.$message.success(response.data.data)
                }
            })

        },
        open() {
            console.log("点击了文字");
            this.$prompt('请输入100的倍数的积分', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^\d+00$/,//正则表达式判断100的倍数
                inputErrorMessage: '请输入100的倍数'
            }).then(({ value }) => {
                let url = 'http://localhost:8088/admireBlog/addAdmireBlog'
                axios.post(url, {
                    blogId:this.blogId,
                    eachNum:value

                }).then((response) => {
                    if (response.data.code==1){
                        this.$message({
                            message: response.data.data,
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消打赏'
                });
            });
        },
        favor(u) {
            this.followorclose(u);
            if (this.liked) {
                this.content = "已关注";
                this.bg_color = "#f56c6c";
                this.ft_color = "#fef0f0";
            } else {
                this.content = "+关注"
                this.bg_color = "#fef0f0";
                this.ft_color = "#f56c6c";

            }
        },
        change() {
            this.bg_color = "#ff9999";
            this.ft_color = "#fef0f0";
        },
        goback() {
            if (this.liked) {
                this.bg_color = "#f56c6c";
                this.ft_color = "#fef0f0";
            }
            else {
                this.bg_color = "#fef0f0";
                this.ft_color = "#f56c6c";
            }
        }
    }

}
</script>
<style>
@import url(//at.alicdn.com/t/c/font_4004562_b46lfqtm52u.css);


ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    margin-top: 10px;
}

li p {
    margin: 0;
    padding: 5px;
    border-radius: 3px;
}
body {
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    /* 背景渐变 */
    background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
}
.shadow {
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #1d2d44;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}
.el-message {
    top: 100px !important;
}

.center {
    width: 100%;
    margin: 0 auto;
    min-width: 1200px;
}

.right-card .el-card__body {
    padding: 0;
    /*去掉card自带内边距*/
}

.el-header {
    background-color: white;
    padding: 20px 0
}

.circle {
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 0px 0px rgba(223, 46, 58, 0.5);
}

.img-box {
    width: 20px;
    height: 20px;
    margin: 5px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

&img {
    width: 100%;
    height: 100%;
}


.check {
    -webkit-transition: box-shadow 0.5s;
    -moz-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
    box-shadow: 0px 0px 0px 1em rgba(226, 32, 44, 0);
}

.img-box-check {
    animation: anm 0.5s;
    -moz-animation: anm 0.5s;
    -webkit-animation: anm 0.5s;
    -o-animation: anm 0.5s;
}

@keyframes anm {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
    }

    50% {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
    }
}
</style>
